<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../js/vue.min.js"></script>
</head>
<body>

<div id="a">

  <h3>组件插槽</h3>
  <test val="xxx">
    test
    <template v-slot:s1>自定义的s1的内容1</template>
  </test>
  <hr>
<!--  语法糖 #+name-->
  <test val="xxx">
  <template #s1>自定义的s1的内容2</template>
  </test>
  <hr>
  <test val="xxx">
  <span slot="s1">自定义的s1的内容3</span>
  </test>
  <hr>
</div>
<script>
  Vue.component("test",{
    props:[],
    template:`
      <div>
      <h4>插槽前</h4>
      <slot>默认插槽</slot>
      <slot name="s1">具名插槽</slot>
      <h4>插槽后</h4>
</div>
    `
  });




  var v = new Vue({
    el:"#a",
    data:{

    },
  });
</script>
</body>
</html>